import { m, MotionProps } from 'framer-motion'

interface Props extends MotionProps {
  className?: string
  key: string
}

export default function MotionWrap({ children, className, key }: Props) {
  const variants = {
    initial: () => ({
      opacity: 0,
      x: '-100%'
    }),
    animate: {
      opacity: 1,
      x: 0,
      transition: { duration: 0.5 }
    },
    exit: () => ({
      opacity: 0,
      x: '-100%',
      transition: { duration: 0.5 }
    })
  }

  return (
    <m.div initial='initial' animate='animate' exit='exit' variants={variants} className={className} key={key}>
      {children}
    </m.div>
  )
}
